<template>
  <div>
    <SideNavbar/>
    <div class="side-nav-padding"></div>
    <div class="app-right-container">
      <div ref="rightBox" class="app-right">
        <Topbar isShowSearch="false"></Topbar>
        <div class="home-page">
          <TopLoading :isLoading="loading"></TopLoading>
          <HeadSlideShow></HeadSlideShow>
          <div :style="{width:$store.getters.contentWidth+'px'}" class="main-container">
            <section v-for="(category,index) in $RECOMMEND" :key="index" class="category-box">
              <span class="category-name">{{category.name}}</span>
              <div class="content">
                <VideoCard
                  v-for="(video,index) in category.videos"
                  :key="index"
                  v-if="index<$store.getters.videoColumns"
                  :video-info="video"
                ></VideoCard>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopLoading from '@/pc/components/TopLoading/Index';
import HeadSlideShow from '@/pc/components/HeadSlideShow/Index';
import VideoCard from '@/pc/components/VideoCard/Index';
import SideNavbar from '@/pc/components/SideNavBar/Index';
import Topbar from '@/pc/components/TopBar/Index';
import { throttle } from '@/pc/common/utils';
import { VideoModel } from '@/vendor/db';

export default {
  name: 'Home',
  data () {
    return {
      categorys: [],
      loading: false
    };
  },
  components: { TopLoading, HeadSlideShow, VideoCard, SideNavbar, Topbar },
  mounted () {
    var self = this;
    var getAppRightWidth = function () {
      var width = self.$refs.rightBox.offsetWidth;// window.getComputedStyle(self.$refs.rightBox)["width"];
      self.$store.commit('updateAppRightWidth', Number.parseInt(width, 10));
    };
    window.addEventListener('resize', throttle(getAppRightWidth, 300));
    getAppRightWidth();
  }
};
</script>
<style scoped  src="./Index.scss" lang="scss"></style>
